<template>
    <div class="user-password-find">
        <div class="big-title">请先完成个人信息验证</div>

        <ul class="form-box">
            <li class="form__item">
                <span class="form__key">绑定手机号</span>
                <div class="form__value">
                    <input type="tel" v-model='mobile' placeholder="请输入手机号">
                </div>
            </li>
            <li class="form__item">
                <span class="form__key">新密码</span>
                <div class="form__value">
                    <input :class='{small:isiOS && newLoginPassword}' type="password" v-model='newLoginPassword' placeholder="请输入新的登录密码">
                </div>
            </li>
            <li class="form__item">
                <span class="form__key">新密码确认</span>
                <div class="form__value">
                    <input :class='{small:isiOS && confirmPassword}' type="password" v-model='confirmPassword' placeholder="请再次输入登录密码">
                </div>
            </li>
            <li class="form__item">
                <span class="form__key">验证码</span>
                <div class="form__value">
                    <input type="tel" v-model='smsCode' placeholder="请输入验证码">
                </div>
            </li>
        </ul>
        <div id="captcha1"></div> <!-- 验证码容器元素 -->
        <verification-code text='' v-model='sent' @input='initCaptcha'></verification-code>

        <span class="button long confirm" @click='reset'>提交</span>

    </div>
</template>

<script>
    import { Promise } from 'es6-promise'
    import verificationCode from '../components/VerificationCode.vue'
    import  { mapGetters, mapActions }  from 'vuex'
    import { findLoginPasswordValidation } from '../validation/validation'
    import { allApi, userApi } from '../api/api'
    import moment from 'moment'
    import { getScript, getOS } from '../utils/utils'

    export default {
        components:{
            verificationCode,
        },
        data() {
            return {
                sent:false,
                isiOS:getOS() == 'iOS',
                mobile:'',
                url:'',
                ticket:'',
                smsCode:'',
                validate:'',
                newLoginPassword:'',
                confirmPassword:'',
                sent:false
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo'
            ]),
            currentPage(){
                if(_.isEmpty(this.listInfo)) return 1
                return this.listInfo.pageNum
            },
            hasUserCount(){
                return !_.isEmpty(this.userCount)
            },
            userInfo(){
                return this.localInfo.userInfo
            },
            noInvoiceInfo(){
                return _.isEmpty(this.invoiceInfo)
            }
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip',
                'setNeedLogin',
                'setSessionId'
            ]),

            // function
            goRouter(name){
                this.$router.push({
                    name:name
                })
            },
            initCaptcha(){
                let self = this
                initNECaptcha({
                  captchaId: '587495ba1ff74edf9981e2ebcbc34041',
                  element: '#captcha1',
                  mode: 'popup',
                  onReady: function (instance) {
                    $('.yidun_intelli-text').text('点击发送验证码')
                    // 验证码一切准备就绪，此时可正常使用验证码的相关功能
                  },
                  onVerify: function (err, data) {
                    setTimeout(()=>{
                        $('.yidun_tips__text').text('发送验证码成功')
                    },500)
                    if(data){
                        self.validate = data.validate
                        self.getCode()
                    }
                  }
                }, function onload (instance) {
                    // self.inst = instance

                }, function onerror (err) {
                    self.setMsgTip({
                        text:'初始化失败，请重新点击获取验证码',
                        type:'warn'
                    })
                  // 验证码初始化失败处理逻辑，例如：提示用户点击按钮重新初始化
                })
            },
            setCaptcha(){
                getScript('//cstaticdun.126.net/load.min.js',()=>{
                    this.initCaptcha()
                })
            },
            getCode(){
                if(this.sent) return
                this.showLoading()

                userApi.sendSms({
                    mobile:this.mobile,
                    type:'FORGOT_LOGIN_PASSWORD',
                    NECaptchaValidate:this.validate,
                    clientType:'H5'
                })
                .then(result=>{
                    this.sent = true
                    this.hideLoading()
                })
                .catch(error => {
                    console.error(error)
                    this.sent = false
                    this.initCaptcha()
                    this.hideLoading()
                })
            },
            reset(){
                let params = {
                    mobile:this.mobile,
                    smsCode:this.smsCode,
                    newLoginPassword:this.newLoginPassword,
                    confirmPassword:this.confirmPassword,
                }
                if(!findLoginPasswordValidation(params)) return
                this.showLoading()
                userApi.forgotLoginPassword(params)
                .then(result=>{
                    this.hideLoading()
                    this.setNeedLogin(true)
                    // this.setSessionId('')
                    this.setMsgTip({
                        text:"更新登录密码成功，请重新登录!",
                        type:'success'
                    })
                    this.$router.push({
                        name:'bind-phone'
                    })
                })
                .catch(error => {
                    this.hideLoading()
                })
            },
        },
        created(){
            let mobile = this.$route.query.mobile
            if(mobile){
                this.mobile = mobile
            }
            else{
                this.mobile = this.userInfo.user.mobile
            }
            this.setCaptcha()
        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";
    .user-password-find{
        .form__value input.small{
            font-size: 12px;
        }
        .tips{
            @extend %font-caption;
            padding: 8px 24px;
        }
        .form-box{
            margin-top: 0;
        }
        .modal-password-auth{
            .component-modal__main{
                padding-left:16px;
                padding-right:16px;
            }
        }
        .modal-password-auth__title{
            @extend %font-title;
            color:$importColor;
            text-align: center;
        }
        .modal-password-auth__input{
            padding: 24px 0;
            input{
                @extend %font-subhead;
                width: 100%;
                box-sizing: border-box;
                padding:14px 16px;
                background-color: $backgroundColor;
                border: 1px solid $sectionColor;
            }
        }
        .modal-password-auth__button{
            display: flex;
            justify-content: flex-end;
            .button{
                margin-left:16px;
                &:first-child{
                    margin-left: 0;
                }
            }
        }
    }

</style>
